<template>
	<view class="centr">
		<view class="top">
			<block v-if="$store.state.user">
				<image :src="$store.state.user.fuserImg" @tap="preimg($store.state.user.fuserImg)" mode=""></image>
				<text style="font-size: 18px;">
					{{ $store.state.user.fphone }}
					<span style="padding: 0px 8px;background: #e2b85c;font-size: 14px;border-radius: 3px;display: inline-block;margin-left: 10px;">
						<!-- V{{$store.state.user.fviplevel}} -->
						</span>
				</text>
				<view class="tooL"><image src="/static/img/set.svg" mode="" @tap="showright(true)"></image></view>
			</block>
			<block v-else><button type="default" class="weideng" @tap="$go('/pages/login/login')">登录/注册</button></block>
			<view class="user">
				<view @tap="$go('/pages/center/jifen',true)">
					{{obj.fpoint?obj.fpoint:0}}
					<br />
					<text>积分</text>
				</view>
				<view @tap="$go('/pages/center/mycang',true)">
					{{obj.ffocusnum?obj.ffocusnum:0}}
					<br />
					<text>关注</text>
				</view>
				<view @tap="$go('/pages/center/dngyuelist',true)">
					{{obj.ffollownum?obj.ffollownum:0 }}
					<br />
					<text>订阅</text>
				</view>
			</view>
		</view>
		<previewImage ref="previewImage" :opacity=".7" :dom="selimg" :tool="true" :imgs="[$store.state.user.fuserImg]" ></previewImage>
		<uni-list class="uni-list1" style="position: relative;">
			<uni-list-item style="font-size: 16px;"
				:show-extra-icon="true"
				showArrow
				link
				:to="`/pages/center/jifen`"
				:extra-icon="extraIcon"
				title="绑定实盘"
				thumb="/static/img/jifen.svg"
				thumb-size="sm"
			>
				<text  slot="body" style="font-size: 14px;color: #3b4144;">积分充值</text>
			</uni-list-item>
			<uni-list-item style="font-size: 16px;"
				:show-extra-icon="true"
				showArrow
				link
				:to="`/pages/center/setshi`"
				:extra-icon="extraIcon"
				title="绑定实盘"
				thumb="/static/img/bangding.svg"
				thumb-size="sm"
			>
				<text  slot="body" style="font-size: 14px;color: #3b4144;">绑定实盘</text>
			</uni-list-item>
			<uni-list-item style="font-size: 16px;" :show-extra-icon="true" showArrow link :to="`./dngyuelist`" :extra-icon="extraIcon" title="订阅列表	" thumb="/static/img/dingyue.svg" thumb-size="sm" >
			<text  slot="body" style="font-size: 14px;">传统订阅</text>
			</uni-list-item>
			<!-- <uni-list-item style="font-size: 16px;" :show-extra-icon="true" showArrow link :to="`./celue`" :extra-icon="extraIcon" title="订阅列表	" thumb="/static/img/celue.svg" thumb-size="sm" >
			<text  slot="body" style="font-size: 14px;">策略订阅</text>
			</uni-list-item> -->
			<uni-list-item style="font-size: 16px;" :show-extra-icon="true" showArrow link :to="`./mycang`" :extra-icon="extraIcon" title="我的关注" thumb="/static/img/guanzhu.svg" thumb-size="sm">
			<text  slot="body" style="font-size: 14px;">我的关注</text>
			</uni-list-item>
			<uni-list-item
				style="border-top: 20px solid #f7f7f7;"
				:show-extra-icon="true"
				showArrow
				link
				:to="`./mingxi`"
				title="成交明细"
				thumb="/static/img/mingxi.svg"
				thumb-size="sm"
			>
			<text  slot="body" style="font-size: 14px;">成交明细</text>
			</uni-list-item>
			<uni-list-item :show-extra-icon="true" showArrow link :to="`./kefu`" :extra-icon="extraIcon" title="在线客服" thumb="/static/img/kefu.svg" thumb-size="sm" >
			<text  slot="body" style="font-size: 14px;">在线客服</text>
			</uni-list-item>
			<view class="" @tap="jiancedenglu" style="position: absolute;width: 100%;height: 100%;z-index: 10;" :style="{'display':$store.state.user?'none':'block'}">
			</view>
		</uni-list>
		<uni-popup type="bottom" ref="setig">
			
			<view style="background: #ccc">
				<uni-list style="margin-top: 40px;">
					<text class="slot-box slot-text" @click="selimg" style="font-size: 15px;text-indent: 15px; color: #3b4144;line-height: 45px;border-bottom: 1px solid #e5e5e5;font-weight: 550;">更改头像</text>
					
					<text class="slot-box slot-text" @click="$store.commit('removeuser')" style="text-indent: 15px;font-size: 15px;color: #3b4144;line-height: 45px;border-bottom: 1px solid #e5e5e5;font-weight: 550;">退出登录</text>
					
					<navigator url="/pages/login/forgot" style="font-size: 15px;color: #3b4144;text-indent: 15px;line-height: 45px;border-bottom: 1px solid #e5e5e5;font-weight: 550;">设置密码</navigator>
					
				</uni-list>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools/index.js'	;
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
export default {
	components: { previewImage},
	data() {
		return {
			extraIcon: {
				color: '#4cd964',
				size: '22',
				type: 'gear-filled'
			},
			obj:{
				
			}
		};
	},
	methods: {
		preimg(src){
			src = src+'?type='+Math.random(10000);
			var _this = this;
			this.$refs.previewImage.open(src);
		},
		jiancedenglu(){
			this.$go('123',true)
		},
		getdata() {
			var _this = this;
			if(!_this.$store.state.user.token) return;
			uni.request({
				method: 'post',
				url: _this.$store.state.url + '/api/shequuser/mycenter/getuserinfo?ftoken=' + _this.$store.state.user.token,
				// contentType: "application/json;",
				// data: JSON.stringify(_this.shisetdata),
				success: function(data) {
					// console.log(data)
					data = data.data;
					if (data.code == 200) {
						_this.obj = data.data;
					} else {
						
					}
				}
			})
		},
		showright(e) {
			if (e) {
				this.$refs['setig'].open();
			} else {
				this.$refs['setig'].close();
			}
		},
		chang(e) {
			
		},
		uploadtop(base){
			var _this = this;
			
			uni.request({
			    url: _this.$store.state.url +'/api/shequuser/uploadImage',
				
				method:'POST',
			    data: {
					ftoken:_this.$store.state.user.token,
			        fbase64:base,
			    },
			    success: (res) => {
					console.log(res)
					setTimeout(function(){
						uni.hideLoading();
						res = res.data;
						if (res.code == 200) {
						    // 提醒用户更新fuserImg
							_this.$store.state.user.fuserImg = res.data;
							_this.$store.commit('setuser',_this.$store.state.user);
							_this.$refs.previewImage.close();
						    uni.showToast({
						    	title: '头像设置成功！',
						    	icon: 'none',
						    	duration: 2000
						    });
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
						
					},1000)
			    },
				fail:(res)=>{
					uni.hideLoading()
					uni.showToast({
						title: '服务器错误！',
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		selimg() {
			var _this = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function(res) {
					uni.showLoading({
					    title: '操作等待中...'
					});
					pathToBase64(res.tempFilePaths[0])
					  .then(base64 => {
						_this.uploadtop(base64)
					  })
					  .catch(error => {
					    // console.error(error)
					  })
				}
			});
		}
		
	},
	mounted() {
		
		// console.log(this.$refs.previewImage)
		// console.log(this.$store.state.user)
	},
	onHide() {
		this.$refs['setig'].close();
	},
	onShow() {
		// console.log(this.$store.state.user.fuserImg)
		
		var _this = this;
		uni.getNetworkType({
			success: function(res) {
				if (res.networkType == 'none') {
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration: 5000

						// position:'top'
					});
				}
			}
		});
		uni.onNetworkStatusChange(function(res) {
			if (!res.isConnected) {
				uni.showToast({
					title: '当前无网络连接，请检查！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
			} else {
				uni.showToast({
					title: '网络已连接！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
				_this.getdata();
			}
		});
		_this.getdata();
		// console.log(123)
	}
};
</script>

<style scoped>
.centr {
	background: #f7f7f7;
}
.uni-list1 {
	clear: both;
	margin-top: 45px;	
	background: #f7f7f7;
}
.uni-list1 .uni-list-item {
	padding: 5px 0;
}
.top > * {
	float: left;
}
.top {
	height: 180px;
	background: #168dea;
	color: #fff;
	position: relative;
}
.top > uni-image {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	margin-top: 60px;
	margin-left: 30px;
}
.top > uni-text {
	padding-top: 80px;
	padding-left: 5px;
}
.tooL {
	float: right;
	margin-right: 15px;
}
.tooL uni-image {
	width: 26px;
	height: 26px;
	float: right;
	margin-top: 50px;
}
.tooL uni-button {
	margin-top: 60px;
	float: right;
	clear: both;
	font-size: 14px;
	padding: 2px 10px;
	line-height: unset;
	background: none;
	border: 1px solid #fff;
	color: #fff;
}
.user {
	overflow: hidden;
	clear: both;
	width: calc(100% - 30px);
	color: #666;
	padding: 15px 0;
	margin-left: 15px;
	background: #fff;
	position: absolute;
	bottom: -35px;
	z-index: 10;
	border-radius: 8px;
}
.user > uni-view {
	width: 33.333%;
	height: 92rpx;
	padding-top: 5rpx;
	float: left;
	border-right: 1px solid #ccc;
	box-sizing: border-box;
	text-align: center;
	font-size: 14px;
}
.user > uni-view:last-of-type {
	border: 0;
}

.weideng {
	font-size: 16px;
	color: #168dea;
	border: 0;
	border-radius: 5px;
	display: block;
	margin: auto;
	margin-left: 50%;
	margin-top: 60px;
	padding: 6px 20px;
	transform: translateX(-50%);
	line-height: unset;
}
</style>
